{include file="header/index" /}
		<div class="container whitebg">
			<div class="topnav clearfix">
				<div class="title fl">
					<h3>合同详情</h3>
					<a href="#information">基本信息</a>
					<a href="#operation" class="ac">合同信息</a>
					<a href="#enclosure">附件信息</a>
					<a href="#equipment">设备信息</a>
				</div>
				<div class="backbtnwrap fr">
					<button type="button" class="btn backbtn" onclick="backurl(this)">返回</button>
				</div>
			</div>
			<div class="information" id="information">
				<p class="title">基本信息</p>
				<table class="table table-bordered order_details_table">
					<tr>
						<th>姓名</th>
						<td>{$data.username}</td>
						<th>账户</th>
						<td>{$data.telphone}</td>
					</tr>
					<tr>
						<th>创建时间</th>
						<td>{$data.add_time}</td>
						<th>账号状态</th>
						<td class="redcolor">{$data.account_status}
							{if condition="($data.remark)"}
								&nbsp;&nbsp;&nbsp;备注：{$data.remark}
							{/if}

						</td>
					</tr>
					<tr>
						<th>联系地址</th>
						<td>{$data.province}{$data.city}{$data.area}{$data.user_address}&nbsp;&nbsp;&nbsp;<i class="glyphicon glyphicon-map-marker"></i></td>
						<th>联系电话</th>
						<td>{$data.telphone}</td>
					</tr>
					<tr>
						<th>生日</th>
						<td colspan="3">{$data.birthday}</td>
					</tr>
				</table>
			</div>
			<div class="operation" id="operation">
				<p class="title">合同信息</p>
				<table class="table table-bordered">
					<tr>
						<th>合同编号</th>
						<td>{$data.contract_no}</td>
						<th>推荐人ID</th>
						<td>{$data.introducer_id}</td>
					</tr>
					<tr>
						<th>合同金额</th>
						<td>{$data.contract_money}元</td>
						<th>客户性质</th>
						<td>{$data.nature}-{$data.username}</td>
					</tr>
					<tr>
						<th>原始配件</th>
						<td>{$data.original_parts}</td>
						<th>安装时间</th>
						<td>{$data.installed_time}</td>
					</tr>
					<tr>
						<th>最近一次换芯时间</th>
						<td>{$data.recent_time}</td>
						<th>装机型号(设备号)</th>
						<td class="machinemodel">
							{volist name="$data.equipment" id="eq" offset="0" length='2'}
							{$eq.equipments_number}
							{/volist}
							{if condition="(count($data.equipment) >= 3) "}
							<button class="fr" id="machinemodel" type="button" data-container="body" data-toggle="popover">●●●</i></button>
							{/if}
						</td>
					</tr>
					<tr>
						<th>换芯周期</th>
						<td>{$data.for_core_cycle}个月</td>
						<th>换芯时间</th>
						<td class="redcolor">{$data.for_core_time}</td>
					</tr>
					<tr>
						<th>安装时间</th>
						<td>{$data.installed_time}</td>
						<th>免费移机次数</th>
						<td>{$data.moving_machine_number}次</td>
					</tr>
					<tr>
						<th>续费时间</th>
						<td class="redcolor">{$data.renew_date}</td>
						<th>免费换芯次数</th>
						<td>{$data.for_core_number}次</td>
					</tr>
					<tr>
						<th>住屋性质</th>
						<td>{$data.housing_property}</td>
						<th>是否入职</th>
						<td>{$data.is_entry}</td>
					</tr>
					<tr>
						<th>备注</th>
						<td colspan="3">{$data.contract_remark}</td>
					</tr>
				</table>
			</div>
			<!--附件信息-->
			<div class="enclosure clearfix" id="enclosure">
				<p class="title" onclick="hideenclosurelist()">附件信息&nbsp;&nbsp;<i class="glyphicon glyphicon-chevron-down"></i></p>
				<div class="enclosurelist clearfix hides">
					<div class="enclosureitem">
						<img src="__IMG__/enclosure.png" />
					</div>
					<div class="enclosureitem">
						<img src="__IMG__/enclosure.png" />
					</div>
					<div class="enclosureitem">
						<img src="__IMG__/enclosure.png" />
					</div>
					<div class="enclosureitem">
						<img src="__IMG__/enclosure.png" />
					</div>
					<div class="enclosureitem">
						<img src="__IMG__/enclosure.png" />
					</div>
					<div class="enclosureitem">
						<img src="__IMG__/enclosure.png" />
					</div>
					<div class="enclosureitem">
						<img src="__IMG__/enclosure.png" />
					</div>
				</div>
			</div>

			<!--设备信息-->
			<div class="equipment" id="equipment">
				<p class="title">设备信息</p>
				<table class="table">
					<tr>
						<th>装机型号</th>
						<th>设备号</th>
						<!--<th>合同编号</th>-->
						<!--<th>所属区域</th>-->
						<th>操作记录</th>
						<th>操作</th>
						<th>详情备注</th>
					</tr>
					{volist name="$data.equipment" id="eq"}
					<tr>
						<td>{$eq.equipments_name}</td>
						<td>{$eq.equipments_number}</td>
						<td class="relative Operationrecord">
							{if condition="(isset($eq.record) AND !empty($eq.record))"}
							<span>{$eq.equipments_number}设备记录</span>
							<button id="Operationrecord" type="button" onclick="hideorshow(this)">●●●</button>
							<div class="frame" style="width: 200px;">
								<span class="triangle"></span>
								{volist name="$eq.record" id="record"}
								<p>{$eq.equipments_number}设备{$record.type} </p>
								{/volist}
							</div>
							{else /}
							<span>暂无记录</span>
							{/if}
						</td>
						<td>
							<a href="#">解绑</a>
							<a href="" data-toggle="modal" data-target="#Modify_device_information">修改</a>
						</td>
						<td class="relative devicedetails">
							{if condition="(isset($eq.record) AND !empty($eq.record))"}
							<button id="devicedetails" type="button" onclick="hideorshow(this)">●●●</button>
							<div class="frame" style="width: 200px;">
								<span class="triangle"></span>
								{volist name="$eq.record" id="record"}
								<p>{$eq.equipments_number}设备{$record.type} </p>
								<p>{$record.type}时间2017-08-30</p>
								{/volist}
								<p>移机时间2017-08-30</p>
								<p>移机时间2017-08-30</p>
								<p>移机时间2017-08-30</p>
								<p>移机时间2017-08-30</p>
							</div>
							{else /}
							<span>暂无记录</span>
							{/if}
						</td>
					</tr>
					{/volist}
				</table>
			</div>

			<div class="add_contract">
				<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#New_device"><i class="glyphicon glyphicon-plus"></i>&nbsp;&nbsp;新增设备</button>
			</div>
		</div>

<!-- 新增设备 -->
		<div class="modal fade" id="New_device" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">修改设备信息</h4>
			</div>
			<div class="modal-body">
				<p class="pb20 pt5">合同编号:<span>{$data.contract_no}</span></p>
				<form class="form-inline">
					<div class="form-group">
						<select name="" class="form-control">
							<option value="" selected="selected">请选择装机型号</option>
							<option value="">1</option>
							<option value="">1</option>
							<option value="">1</option>
						</select>
					</div>
					<div class="form-group">
						<input type="text" id="equipments_number" class="form-control" placeholder="输入要修改的设备号">
					</div>
					<button type="button" id="but_equipments_number" class="btn btn-default">自动生成&nbsp;&nbsp;<i class="glyphicon glyphicon-repeat"></i></button>
				</form>
			</div>
			<div class="modal-footer" style="text-align: center;">
				<button type="button" class="btn btn-primary mr50">确认</button>
				<button type="button" class="btn btn-default ml50" data-dismiss="modal">取消</button>
			</div>
		</div>
	</div>
</div>

</body>

</html>
<script type="text/javascript">
	$("#but_equipments_number").click(function () {
		$.get("{:url('Contractinfo/equipmentsNumber')}",{},function (data) {
			$("#equipments_number").val(data)
        });
    });

	//顶部导航
	$('.topnav a').click(function() {
		$(this).addClass('ac').siblings('a').removeClass();
	});

	//返回上一页
	function backurl() {
		history.back();
	}

	//隐藏合同
	function hideenclosurelist() {
		if($('.enclosurelist').css("display") == 'block') {
			$('.enclosurelist').slideUp();
			$('.enclosure .title i').removeClass().addClass('glyphicon glyphicon-chevron-down');
		} else {
			$('.enclosurelist').slideDown();
			$('.enclosure .title i').removeClass().addClass('glyphicon glyphicon-chevron-up');
		}

	};

	//装机型号-更多
    //			'<p>12457487845555(2017-01-10)<span class="redcolor">备注:已移机到其他区域</span></p>' +
    //			'<p>12457487845555</p>' +
	$(function() {
		var html = '';
        {volist name="$data.equipment" id="vo" offset="2" length=''}
        html += '<p>'+{$vo.equipments_number}+'<p>';
        {/volist}


		$('#machinemodel').popover({
			trigger: 'click',
			html: true,
			placement: 'bottom',
			content: html
		});
	})

	//操作记录,详情备注-更多
	function hideorshow(obj) {
		if($(obj).next().css("display") == 'none') {
			$(obj).next().css("display", "block");
		} else {
			$(obj).next().css("display", "none");
		}
	}
	
	//新增合同model下一步
	$('.nextbtn').click(function() {
		if($('#add_contract input[type="checkbox"]').is(':checked')) {
			$("#add_contract").modal("hide");
			$("#add_contract_details").modal("show");
		} else {						
			layer.msg('你还未选中', {
				time: 1000,
				icon: 0
			});
		}
	})

	//model高度自适应
	$(document).ready(function() {
		var height = $(window).height() - 120;
		$(".model_contract").css("height", height * 0.9)
	});

	//日期选择
	$(".form_datetime").datetimepicker({
		format: "yyyy-mm-dd",
		autoclose: true,
		minView: "month",
		todayBtn: true,
		pickerPosition: "bottom-left",
		language: 'cn'
	});

	//增加 删除
	function addmodel() {
		var html = '<div class="form-group col-md-12">';
		html += '<label></label>';
		html += '<select name="" style="margin-right: 4px; margin-left: 4px">';
		html += '<option value="">1</option>';
		html += '<option value="">1</option>';
		html += '<option value="">1</option>';
		html += '</select>';
		html += '<input type="text" placeholder="请输入设备号" style="margin-right: 4px;" />';
		html += '<div class="btn btn-default" style="margin-right: 4px;">自动生成&nbsp;&nbsp;<i class="glyphicon glyphicon-repeat"></i></div>';
		html += '<div class="btn btn-default" onclick="delmodel(this)" style="margin-right: 5px;"><i class="glyphicon glyphicon-minus"></i></div>';
		html += '</div>';
		$('.Installed_model').append(html);
	}

	function delmodel(obj) {
		$(obj).parent().remove();
	}
	

	//删除合同
	function delcontract(obj) {
		layer.confirm('你确定删除此合同吗？', {
			btn: ['确定', '取消'] //按钮
		}, function() {
			layer.msg('删除成功', {
				time: 1000,
				icon:1
			})
			$(obj).parent().remove();
		});
	}

	//返回
	$('.backbtn').click(function() {
		$("#add_contract_details").modal("hide");
		$("#add_contract").modal("show");
	})
	//保存	
	$('.savebtn').click(function() {
		layer.msg('保存成功', {
			time: 1000,
			icon:1
		})
	})
	//重置
	$('.resetbtn').click(function() {
		layer.msg('重置成功', {
				time: 1000,
				icon:1
		})
		for(var i = 0; i < $('.contract_information form').length; i++) {
			$('.contract_information form')[i].reset();
		}
	})
</script>